<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="${proPath}/js/ztree/zTreeStyle.css" />
		<link href="https://cdn.bootcss.com/layer/2.1/skin/layer.css" rel="stylesheet">
		<link href="${proPath}/js/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
		<link href="${proPath}/js/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet">

		<script src="${proPath}/js/jquery/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="${proPath}/js/ztree/jquery.ztree.all-3.5.min.js"></script>
		<script src="${proPath}/js/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
		<script src="https://cdn.bootcss.com/layer/2.1/layer.js"></script>
		<title>ztree menu</title>
	</head>
	<body>
		<div style="text-align: center;">
			<div class="container">
				<p>zteee示例demo</p>
				<div class="row">
					<div class="col-md-3">
						<ul id="treeDemo" class="ztree" style="width: 230px; overflow: auto;"></ul>
					</div>

					<div class="col-md-3">.col-md-1</div>

					<div class="col-md-3">
						<ul id="treeDemo2" class="ztree"></ul>
					</div>
				</div>

			</div>
		</div>
	</body>
	<script type="text/javascript">
		function addDiyDom(treeId, treeNode) {
			var clasObj = $("#" + treeNode.tId + "_ico")
			clasObj.removeClass().addClass(treeNode.icon)
		}
		//双击后 图标又会变回去
		function zTreeOnDblClick(event, treeId, treeNode) {
			alert(treeNode ? treeNode.tId + ", " + treeNode.name : "isRoot");
		};

		function zTreeOnExpand(event, treeId, treeNode) {
			addDiyDom(treeId,treeNode)
			//layer.msg(treeNode.tId + ", " + treeNode.name + "||" + treeNode.icon);
		};

		function initZtree(tree, url) {
			$.ajax({
				contentType: "application/json;charset=UTF-8",
				//请求地址
				url: url,
				//数据，json字符串 data : JSON.stringify(list),
				//请求成功
				success: function(result) {
					console.log(result);
					var setting = {
						data: {
							simpleData: {
								enable: true,
								//pIdKey: "pid", //java返回来的本来是pId，结果js接收到变成pid小写了|使用fastjson转换
							},
						},
						view: {
							addDiyDom: addDiyDom,
							onDblClick: zTreeOnDblClick
						},
						callback: {
							onExpand: zTreeOnExpand, //展开
							onCollapse: zTreeOnExpand //折叠
						},
					};
					$.fn.zTree.init($("#" + tree), setting, result);
				},
				//请求失败，包含具体的错误信息
				error: function(e) {
					console.log(e.status);
					console.log(e.responseText);
				}
			});
		}

		$(document).ready(function() {
			// layer.alert('内容');
			layer.msg('hello');
			initZtree('treeDemo', "${proPath}/menu/all/");
			initZtree('treeDemo2', "${proPath}/menu/allnew/");
		});
	</script>
</html>
